<template>
<div>
  <v-card
      max-width="600"
      class="mx-auto mt-6"
  >
    <v-container>
      <v-row comfortable>
        <v-col cols="12">
          <v-card
              color="#1F7087"
              theme="dark"
              hover
          >
            <div class="d-flex flex-no-wrap justify-space-between px-4" @click="toAssessment(1)">
              <div>
                <v-card-title class="text-h5">
                  SDS-抑郁测评
                </v-card-title>

                <v-card-subtitle>怀疑自己有抑郁？测试一下！</v-card-subtitle>
                <v-avatar
                    class="ma-3"
                    size="50"
                    rounded="0"
                >
                  <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
                </v-avatar>
              </div>
              <v-card-actions>
                <v-btn
                    class="ms-2"
                    variant="outlined"
                >
                  免费测评
                </v-btn>
              </v-card-actions>
            </div>
          </v-card>
        </v-col>
        <v-col cols="12">
          <v-card
              color="#952175"
              theme="dark"
              hover
          >
            <div class="d-flex flex-no-wrap justify-space-between px-4" @click="toAssessment(1)">
              <div>
                <v-card-title class="text-h5">
                  SCL-90心理评估
                </v-card-title>

                <v-card-subtitle>综合心理健康评估，认识最真实的自己！</v-card-subtitle>

                <v-avatar
                    class="ma-3"
                    size="50"
                    rounded="0"
                >
                  <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
                </v-avatar>
              </div>
              <v-card-actions>
                <v-btn
                    class="ms-2"
                    variant="outlined"
                >免费测评</v-btn>
              </v-card-actions>
            </div>
          </v-card>
        </v-col>

        <v-col cols="12">
          <v-card
              color="#8c9eff"
              theme="dark"
              hover
          >
            <div class="d-flex flex-no-wrap justify-space-between px-4" @click="toAssessment(1)">
              <div>
                <v-card-title class="text-h5">
                  MBTI十六人格测试
                </v-card-title>

                <v-card-subtitle>广泛应用于职业发展及恋爱社交等领域</v-card-subtitle>

                <v-avatar
                    class="ma-3"
                    size="50"
                    rounded="0"
                >
                  <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
                </v-avatar>
              </div>
              <v-card-actions>
                <v-btn
                    class="ms-2"
                    variant="outlined"
                >免费测评</v-btn>
              </v-card-actions>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import {ref} from "vue";
const route = useRoute();
const router = useRouter();

function toAssessment(category){
router.push({name:"Prepare"});
}
</script>

<style scoped>

</style>
